<template>
  <div>
    <el-dialog
      :title="title"
      width="45%"
      :visible="dialogVisible"
      @close="handleClose"
    >
      <el-form ref="skuForm" label-width="100px" :model="skuForm" :rules="rules">
        <el-form-item
          prop="skuName"
          label="商品名称"
        >
          <el-input v-model="skuForm.skuName" placeholder="请输入" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item
          label="品牌"
          prop="brandName"
        >
          <el-input v-model="skuForm.brandName" placeholder="请输入" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item
          label="商品价格(元)"
          prop="price"
        >
          <el-input-number v-model="skuForm.price" controls-position="right" :min="0" :max="100" size="large" />
        </el-form-item>
        <el-form-item
          label="商品类型"
          prop="className"
        >
          <el-select v-model="skuForm.className" placeholder="请选择" style="width:100%">
            <el-option v-for="item in skuClassName" :key="item.classId" :label="item.className" :value="item.classId" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="规格"
          prop="unit"
        >
          <el-input v-model="skuForm.unit" placeholder="请输入" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item
          label="商品图片"
          prop="skuImage"
        >
          <el-upload
            class="avatar-uploader"
            action="http://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
            name="fileName"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :multiple="false"
          >
            <img v-if="skuForm.skuImage" :src="skuForm.skuImage" class="avatar">
            <i v-else class="el-icon-upload2 avatar-uploader-icon" />
          </el-upload>
          <div class="text">
            支持扩展名：jpg、png，文件不得大于2MB
          </div>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center" align="middle" class="dialog-footer">
        <el-button type="warning" plain @click="handleClose">取消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确认</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('sku')
import { addSkuData, updateSkuData } from '@/api/sku'
export default {
  name: 'Addsku',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    allSkuList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
    //   imageUrl: '',
      loading: false,
      skuForm: {
        skuName: '',
        brandName: '',
        price: 0,
        classId: '',
        unit: '',
        skuImage: '',
        className: ''
      },
      rules: {
        skuName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        brandName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        className: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        skuImage: [
          { required: true, message: '请上传', trigger: 'blur' }
        ]
      }

    }
  },
  computed: {
    ...mapState(['skuClassName']),
    title() {
      return this.skuForm.skuId ? '修改商品' : '新增商品'
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.$refs.skuForm.resetFields()
      this.skuForm = {}
    },
    async submit() {
      try {
        await this.$refs.skuForm.validate()
        this.loading = true
        this.skuForm.skuId ? await updateSkuData(this.skuForm) : await addSkuData(this.skuForm)
        this.$message.success(this.skuForm.skuId ? '修改商品成功' : '增加商品成功')
        this.handleClose()
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 图片
    handleAvatarSuccess(res, file) {
      this.skuForm.skuImage = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG || isPNG && isLt2M
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__title {
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 700;
}
::v-deep.el-dialog {
    border-radius: 15px !important;

}
 ::v-deep label {
    font-weight: 400 !important;
  }
.el-form{
        padding: 0px 50px !important;
        .el-input-number {
     width: 408px !important;
    // padding: 0 0 0 10px !important;
 ::v-deep.el-input-number__decrease {
    height: 20px !important;
    .el-icon-arrow-down {
        line-height: 20px;
    }
  }

  }
        }

 .el-button--primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
     margin-left: 50px !important;

  }
  .el-button--warning.is-plain {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
      font-size: 14px;

  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #bbc0cc;
    width: 84px;
    height: 84px;
    line-height: 84px;
    text-align: center;
       border: 1px dashed #d9d9d9;
       background-color: #f4f6fb;
        border-radius: 6px;
       ::v-deep .el-icon-upload2 {
            font-size: 16px !important;
        }
  }
  .avatar {
    width: 84px;
    height: 84px;
    display: block;
  }
  .text {
    color: #bbc0cc;
    font-size: 14px;
    margin-top: 7px;
  }
</style>
